<template>
 <div class="all-city">
    <div>
      <ul class="current-city">
        <h2 class="border-bottom">当前城市</h2>
        <li class="border-bottom">
          <span>{{ this.$store.state.curCity }}</span>
        </li>
      </ul>
      <ul class="hot-city">
        <h2 class="border-bottom">热门城市</h2>
          <li v-for="item of hotlist" :key="item.id" @click="currcityclick(item.name)">
            <span>{{ item.name }}</span>
          </li>
      </ul>
      <div v-for="(vlue,key) in list" :key="key">
        <ul class="a-start">
          <h2 class="border-topbottom" :ref="key">{{key}}</h2>
          <li class="border-bottom" v-for="item of vlue" :key="item.id" @click="currcityclick(item.name)">
          {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'CurrentHome',
  props: {
    list: Object,
    hotlist: Array,
    letterci: String
  },
  methods: {
    currcityclick (city) {
      this.$store.dispatch('changeCity', city)
      this.$router.push('/')
    }
  },
  mounted () {
    let wrapper = document.querySelector('.all-city ')
    this.scroll = new BScroll(wrapper, {
      tap: true,
      click: true
    })
  },
  watch: {
    letterci () {
      this.scroll.scrollToElement(this.$refs[this.letterci][0], 300)
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .all-city
    position absolute
    top 1.6rem
    left 0
    right 0
    bottom 0
    z-index -1
    overflow hidden
    .current-city
      h2
        background #EEEEEE
        padding 0.2rem 0
        font-size 0.32rem
        padding-left 0.2rem
      li
        padding 0.4rem 0
        margin-left 0.2rem
        font-size 0.32rem
        span
          border 1px solid #CCCCCC
          padding 0.12rem 0.8rem
          border-radius 0.06rem
    .hot-city
      overflow auto
      h2
        background #EEEEEE
        padding 0.2rem 0
        font-size 0.32rem
        padding 0.2rem
        margin-bottom 0.1rem
      li
        margin 0.3rem 0.2rem
        font-size 0.32rem
        float left
        span
          border 1px solid #CCCCCC
          padding 0.2rem 0.8rem
          border-radius 0.06rem
    .a-start
      margin-top 0.1rem
      h2
        background #EEEEEE
        padding 0.2rem 0
        font-size 0.32rem
        padding 0.2rem
        margin-bottom 0.1rem
      li
        padding 0.3rem 0.2rem
        font-size 0.32rem
</style>
